<template>
  <div class="body">
    <div style="display:flex;justify-content: space-between">
      <!-- 添加按钮 -->
      <div class="add-button" @click="addNotes">添加</div>
      <div class="add-button" @click="$router.push('/')">返回</div>
    </div>
    <transition-group enter-active-class="animate__animated animate__fadeIn"
      leave-active-class="animate__animated animate__fadeOutDown animate__faster" tag="div">
      <!-- 便签卡片 -->
      <div class="card" v-for="item in notes" :key="item.id">
        <!-- 固钉 -->
        <svg t="1660375369423" class="card-icon" viewBox="0 0 1024 1024" version="1.1"
          xmlns="http://www.w3.org/2000/svg" p-id="16599" width="32" height="32">
          <path
            d="M483.786354 869.384887c-88.68694 68.1318-216.714034 62.171171-298.212093-18.423764-81.49806-80.522684-87.530939-207.177027-18.604389-294.816341l-1.336626-1.408876L545.090524 179.577507c66.181048-65.458548 173.472377-65.458548 239.653426-0.072251 66.108798 65.458548 66.108798 171.593876-0.07225 236.980174l-359.407889 355.506385c-44.144782 43.602907-115.63621 43.602907-159.780992 0-44.108657-43.602907-44.108657-114.335709 0-158.010865l319.561984-315.985607 39.95428 39.484654-319.561984 315.985607a55.408566 55.408566 0 0 0 0 79.005432c22.072391 21.783391 57.836167 21.783391 79.872433 0l359.480139-355.506385c44.036407-43.602907 44.036407-114.299584 0-158.010866-44.144782-43.602907-115.63621-43.602907-159.780993 0l-359.480138 355.506386c-66.181048 65.458548-66.181048 171.521626 0 237.016298s173.472377 65.458548 239.653426 0l399.362167-394.991039 39.954279 39.484654-419.375432 414.751429-1.336626-1.336626z"
            fill="#231815" p-id="16600"></path>
        </svg>
        <!-- 头部 -->
        <div class="card-header" :id="'header' + item.id" style="border-radius: 5px;">
          <span>{{ item.title }} ({{ item.id }})</span>
          <div @click="deleteNotes(item.id)">
            <svg class="delete-icon" t="1660375610867" viewBox="0 0 1024 1024" version="1.1"
              xmlns="http://www.w3.org/2000/svg" p-id="2492" width="15" height="15">
              <path
                d="M975.069283 746.176494a162.756163 162.756163 0 0 1-230.134685 230.134686L511.97742 743.399162 279.065402 976.31118A162.756163 162.756163 0 0 1 48.930717 746.176494L281.842734 513.241896 48.930717 280.329879a162.688423 162.688423 0 0 1 0-230.112106 162.711003 162.711003 0 0 1 230.134685 0l232.912018 232.889438L744.912018 50.217773a162.711003 162.711003 0 1 1 230.134685 230.112106L742.134686 513.241896l232.934597 232.934598z"
                p-id="2493"></path>
            </svg>
          </div>
        </div>
        <!-- 内容 -->
        <div class="card-content">
          <textarea class="textarea" v-model="item.content" :id="'focus' + item.id" @blur="saveNotes"></textarea>
        </div>
      </div>
    </transition-group>
  </div>
</template>

<script setup>
import { ref, reactive, nextTick } from "vue"
// 初始化
let ID = ref(0);
const notes = reactive([{ id: ID.value, title: "便签", content: "卡片内容" }]);
// 找到localStorage数组对象中的id最大的一位,作为id的初始值
function findMaxId(notes) {
  let maxId = 0
  notes.forEach(item => {
    if (item.id > maxId) { maxId = item.id }
  })
  return maxId
}
// 是否有存储的数据
if (localStorage.getItem("notes")) {
  ID.value = findMaxId(JSON.parse(localStorage.getItem("notes")));
  // 去重
  notes.push(...JSON.parse(localStorage.getItem("notes")).filter(item => {
    return notes.every(item2 => {
      return item.id !== item2.id
    })
  }))
}
// 添加卡片
const addNotes = () => {
  ID.value++;
  // 创建新的卡片
  notes.push({
    id: ID.value,
    title: "便签",
    content: ""
  })
  // 输入框聚焦到新增卡片,要等dom更新后才能聚焦
  nextTick(() => {
    document.getElementById("focus" + ID.value).focus()
  })
  // 卡片头部随机颜色
  let color = ["#f44336", "#e91e63", "#9c27b0", "#673ab7", "#3f51b5", "#2196f3", "#03a9f4", "#00bcd4", "#009688", "#4caf50", "#8bc34a", "#cddc39", "#ffeb3b", "#ffc107", "#ff9800", "#ff5722", "#795548", "#9e9e9e", "#607d8b"]
  nextTick(() => {
    document.getElementById("header" + ID.value).style.backgroundColor = color[Math.floor(Math.random() * color.length)]
  })
}
// 删除卡片
const deleteNotes = (id) => {
  // id等于0的卡片不允许删除
  if (id === 0) return console.log("不允许删除");
  // 找到指定id的卡片，删除
  notes.splice(notes.findIndex(item => item.id === id), 1)
  // 删到只有一个卡片时重置id
  if (notes.length === 1) {
    ID.value = 0;
  }
}
// 输入框失去焦点时保存内容
const saveNotes = () => {
  localStorage.setItem("notes", JSON.stringify(notes))
}
// 监听页面刷新保存数据
window.onbeforeunload = () => {
  localStorage.setItem("notes", JSON.stringify(notes))
}
// 离开页面时保存数据
window.onunload = () => {
  localStorage.setItem("notes", JSON.stringify(notes))
}
</script>

<style lang="less" scoped>
.body {
  width: 100%;
  height: 100vh;
  padding: 20px;
  box-sizing: border-box;
}

.add-button {
  box-sizing: border-box;
  border-radius: 5px;
  height: 40px;
  width: 80px;
  cursor: pointer;
  text-align: center;
  line-height: 40px;
  margin-right: 12px;
  margin-bottom: 18px;
  background-color: #1f9914;
  color: white;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;

  &:hover {
    background-color: #46b63c;
  }
}

.card {
  position: relative;
  width: calc(25% - 12px);
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 5px;
  display: inline-grid;
  margin-right: 12px;
  margin-bottom: 18px;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;

  @media screen and (max-width: 960px) {
    width: calc(33% - 12px);
  }

  @media screen and (max-width: 720px) {
    width: calc(50% - 12px);
  }

  @media screen and (max-width: 414px) {
    width: 100%;
  }
}

.card-icon {
  position: absolute;
  top: -10px;
  left: -10px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  width: 100%;
  border-bottom: 1px solid #ccc;
  padding: 20px;
  box-sizing: border-box;
  font-weight: bold;
}

.card-content {
  // padding: 20px;
  box-sizing: border-box;
  height: 140px;
  // min-height: 60px;
  width: 100%;
  border: 0;
  outline: 0;
  margin: 0;
  font-size: 16px;
  overflow: hidden;
}

.textarea {
  width: 100%;
  height: 138px;
  font-size: 16px;
  font-weight: bold;
  resize: none;
  border: none;
  outline: none;
  overflow: hidden;
  border-radius: 0 0 5px 5px;
  box-sizing: border-box;
  padding: 10px 20px;
}

.delete-icon {
  cursor: pointer;
  transition: all 0.3s;

  &:hover {
    fill: #ff0000;
    transform: rotate(90deg);
  }
}
</style>